<script lang="ts" setup>
import { onHide, onUnload } from "@dcloudio/uni-app"
import CalcSkills from "./components/calc-skills.vue"
import CalcEqu from "./components/calc-equ.vue"
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store";


const headTabs = [
  { id: 1, label: "装备" },
  { id: 3, label: "技能" },
  { id: 4, label: "设置" }
]

const currentTab = ref(1)
const infoStore = useBasicInfoStore()
const char = useCharacterStore()
const configStore = useConfigStore()

onMounted(async () => {
  await char.newCharacter(infoStore.currentRole, "0")
})

function save_config() {
  configStore.save()
}

onHide(() => {
  save_config()
})

onUnload(() => {
  save_config()
})
</script>

<template>
  <view class="equip-simulator">
    <form-tabs v-model:value="currentTab" :tabs="headTabs" />
    <view v-if="currentTab === 1" class="">
      <CalcEqu />
    </view>
    <view v-if="currentTab === 3" class="">
      <CalcSkills />
    </view>
    <view class="adContainer">
      <view class="ad-name">
        说明
      </view>
      <view style="font-size: 12px; color: #AAA; margin-top: 7px">
        1. 进入查看属性页面将自动启动计算。
      </view>
      <!-- <view style="font-size: 12px; color: #AAA; margin-top: 7px">
        2. 自动计算需要至少8件装备且技能队列中至少1个技能。
      </view>
      <view style="font-size: 12px; color: #AAA; margin-top: 7px">
        3. 移动端计算器部分配置暂时无法缓存。
      </view> -->
      <view style="font-size: 12px; color: #AAA; margin-top: 7px;">
        2. 如发现错误欢迎及时反馈。
      </view>
      <view style="font-size: 12px; color: #AAA; margin-top: 7px; margin-bottom: 30px" class="flex">
        3. 官网链接：<view style="color:rgb(170, 170, 170)">
          https://dnftools.com
        </view>
      </view>
    </view>
  </view>
</template>

<style>
page {
  background-color: #1c1912;
  min-width: 320px;
}
</style>

<style scoped lang="scss">
.equip-simulator {
  padding: 0 20px 15px;
  background-color: #1c1912;
  min-height: 100%;
  color: #eee;
  font-size: 15px;

  .my-fangans {
    .btns {
      display: flex;
      justify-content: center;
      padding: 15px 0 0;
    }

    .tips {
      text-align: center;
      padding-top: 50px;
      padding-bottom: 30px;
    }
  }

  .btn {
    background-color: rgba(#00a2d7, 0.7);
    padding: 0 30px;
    color: #ccc;
    line-height: 27px;
    height: 27px;

    &::after {
      border: none;
    }
  }

  .top-panel {
    position: relative;

    .eq-panel-item {
      // margin-bottom: 15px;
    }

    .btn {
      width: 90px;
    }
  }

  .select-eqs {
    .eq-types {
      margin-bottom: 8px;
    }


    .eqs {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      .eq-item-box {
        position: relative;
        width: calc(100% / 8);

        &.without-tips:hover {
          &:after {
            content: "";
            position: absolute;
            width: 32px;
            height: 32px;
            border: 2px solid #23aaf2;
            left: 0;
            right: 0;
          }
        }
      }

      .eq-item {
        position: relative;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 2px;
      }
    }
  }
}

.adContainer {
  width: 100%;
  color: #aaa;

  .ad-name {
    font-size: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #aaa;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 50px;
      height: 5px;
      background-color: #aaa;
      position: absolute;
      bottom: -3px;
      left: 0;
    }
  }
}
</style>
